<template>
    <div class="scene" id="scene"></div>
</template>
<script>
import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
var scene = null;
let camera = null;
var render = null;
// const width=document.getElementById("scene")client;
// const height=document.getElementById("scene").height;
export default {
    data() {
        return {

        }
    },
    mounted() {
        this.getscene()
        this.getcontrol()
      
    },
    methods: {
        getcontrol() {
            const controls = new OrbitControls(camera, render.domElement);
            // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
            controls.addEventListener('change', function () {
                render.render(scene, camera); //执行渲染操作
            });//监听鼠标、键盘事件
        },
        getscene() {
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 3000)
            camera.position.set(0, 10, 60);
            scene.background=new THREE.TextureLoader().load("./libs/draco/gltf/sky.png")
            camera.lookAt(0, 0, 0);
            // const geometry = new THREE.BoxGeometry(100, 100, 100);
            // const material = new THREE.MeshLambertMaterial({
            //     color: 'red'
            // });
            // const mesh = new THREE.Mesh(geometry, material);
            // scene.add(mesh)
            //  this.gethelper()

            this.getlight()
          
            render = new THREE.WebGLRenderer();

            render.setSize(window.innerWidth, window.innerHeight);
            render.render(scene, camera);
            document.getElementById("scene").appendChild(render.domElement)
            const dracoloader = new DRACOLoader();
            dracoloader.setDecoderPath("./libs/draco/gltf");
            const loader = new GLTFLoader();
            console.log(loader)
            loader.setDRACOLoader(dracoloader);
            loader.load('./libs/draco/gltf/coffeeshop.glb', (gltf) => {
                console.log('控制台查看加载gltf文件返回的对象结构', gltf);
                console.log('gltf对象场景属性', gltf.scene);
                scene.add(gltf.scene);
                console.log(scene)
              render.render(scene, camera);
          
            })
        
            //  this.getmesh()

        },
        getrender() {
           

        },
        gethelper() {
            const axesHelper = new THREE.AxesHelper(250);
            scene.add(axesHelper);
        },
        getlight() {
            const ambient = new THREE.AmbientLight(0xffffff, 0.4);
            scene.add(ambient);
        },
     
    }
}

</script>
<style>
.scene {
    width: 100%;
    height: 100%;
}
</style>